<template>
  <el-dialog
    :close-on-click-modal="false"
    :title="title"
    :visible.sync="visible"
    :before-close="close"
    lock-scroll
    append-to-body
  >
    <el-form
      :rules="rule"
      status-icon
      :model="datas"
      @keyup.enter.native="save"
      ref="editForm"
    >
      <el-row :gutter="10">
        <el-col :span="23">
          <el-form-item prop="uid" label="姓名" :label-width="baseStyle.width">
            <el-select
              v-model="datas.uid"
              placeholder="请输入关键字搜索"
              style="width: 100%"
              filterable
            >
              <el-option
                v-for="(item, index) in usersData"
                :key="item.id + 'qww' + index"
                :label="item.realname"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item
            prop="month"
            label="时间"
            :label-width="baseStyle.width"
          >
            <el-date-picker
              v-model="datas.month"
              type="month"
              placeholder="选择月"
              value-format="yyyy-MM"
            />
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item
            prop="score"
            label="分数"
            :label-width="baseStyle.width"
          >
            <el-input-number
              autofocus
              v-model="datas.score"
              :precision="2"
              :step="0.01"
              style="width: 100%"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item
            prop="qualitySpotId"
            label="考核点"
            :label-width="baseStyle.width"
          >
            <el-select
              v-model="datas.qualitySpotId"
              filterable
              placeholder="请选择"
              popper-class="spot-select"
              style="width: 100%"
            >
              <el-option
                v-for="(item, index) in options"
                :key="item.id"
                :label="`${index + 1}、${item.name}`"
                :value="item.id"
              >
                <div>
                  {{ index + 1 + "、" }}<span class="html-content" v-html="item.name"></span>
                </div>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="23">
          <el-form-item prop="memo" label="备注" :label-width="baseStyle.width">
            <el-input
              v-model="datas.memo"
              placeholder="请输入"
              style="width: 100%"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button :type="'primary'" :loading="loading" @click.native="save()"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { Message } from "element-ui";

export default {
  name: "ClassicForm",
  props: {
    visible: Boolean,
    title: String,
    baseStyle: Object,
    datas: {
      type: Object
    },
    options: {
      type: Array,
    },
    usersData: {
      type: Array,
    },
    saveForm: Function,
  },
  data() {
    return {
      loading: false,
      rule: {
        uid: [
          {
            required: true,
            message: "请选择人员",
            trigger: ["blur", "change"],
          },
        ],
        month: [
          {
            required: true,
            message: "请选择时间",
            trigger: ["blur", "change"],
          },
        ],
        qualitySpotId: [
          {
            required: true,
            message: "请选择考核点",
            trigger: ["blur", "change"],
          },
        ],
        score: [
          {
            required: true,
            message: "请填写分数",
            trigger: ["blur"],
          },
        ]
      },
    };
  },
  computed: {},
  mounted() {
      this.$set(this.datas,'month',new Date().format('yyyy-MM'))
  },
  methods: {
    cancel() {
      this.loading = false;
      this.$emit("update:visible", false);
      this.$refs.editForm.resetFields();
      this.$set(this.datas,'month',new Date().format('yyyy-MM'))      
    },
    close() {
      this.cancel();
    },
    save() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.loading = true;
          this.$emit("saveForm", { ...this.datas });
          this.cancel();
        } else {
          return false;
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.spot-select
  > .el-scrollbar
  > .el-select-dropdown__wrap.el-scrollbar__wrap
  > .el-scrollbar__view.el-select-dropdown__list
  > .el-select-dropdown__item {
  overflow: unset;
  height: auto;
  width: auto;
  text-overflow: unset;
  div {
    word-wrap: break-word;
    max-width: 500px;
    white-space: break-spaces;
  }
}
</style>